<template>
    <el-card class="box-card" style="width: 50%">
        <template #header>
            <div class="card-header">
                <span>管理员角色</span>
                <span>
                    <el-button @click="addRole()" size="small" type="primary" plain>
                        添加角色
                    </el-button>
                </span>
            </div>
        </template>
        <el-table :data="tableData">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="name" label="角色">
                <template #default="scope">
                    <el-tag prop="name">{{scope.row.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button @click="editRole(scope.row,scope.$index)" icon="EditPen" size="small" type="primary"
                        plain>
                    </el-button>
                    <el-button @click="remove(scope.row.id)" icon="Delete" size="small" type="danger" plain>
                    </el-button>
                    <el-button icon="Setting" size="small" type="primary" plain>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 添加角色 -->
    <el-dialog v-model="addFormVisible" title="添加角色">
        <el-form ref="formRef">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button @click="handleAdd(formRef)" type="primary">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑角色 -->
    <el-dialog v-model="editFormVisible" title="编辑角色">
        <el-form ref="formRef">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="adddialog = false">取消</el-button>
                <el-button @click="handleSubmit(formRef)" type="primary">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import Role from '@/api/Role';
// import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
let tableData = ref([]);
let form = ref({});
// 存储下标
let index = ref();
// 发送ajax,加载列表
onMounted(async () => {
    let { status, msg, data, total } = await Role.role();
    if (status) {
        //浅拷贝，还原表单
        tableData.value = data;
    }
})

let addFormVisible = ref(false);
let editFormVisible = ref(false);
//获取form组件实例
let formRef = ref();

// 打开添加窗口
let addRole = (data) => {
    form.value = { ...data }
 
    addFormVisible.value = true;
}
// 打开编辑窗口
let editRole = async (data, i) => {
    editFormVisible.value = true;
    index.value = i;
    form.value = { ...data };
}
//确定修改
let handleSubmit = async (formEL) => {
    let { status, msg } = await Role.update(form.value.id, { ...form.value });
    if (status) {
        ElMessage.success('保存成功');
        editFormVisible.value = false;
        //修改DOM
        tableData.value[index.value] = { ...form.value }
        // console.log(tableData.value[index.value]);
    } else {
        ElMessage.error('保存失败');
    }
}
// 点击添加确定
let handleAdd = async (formEL) => {
    let { status, msg } = await Role.add({ ...form.value });
    if (status) {
        ElMessage.success(msg);
        loadList();
    }
}

// 删除
let remove = async (id) => {
    let { status, msg } = await Role.remove(id);
    if (status) {
        ElMessage.success('删除成功');
        loadList();
    }
}

</script>
<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;

}
</style>